import { Cascader } from 'antd'
import React, { useState } from 'react'
import type { CascaderProps } from 'antd';
import { RightOutlined } from '@ant-design/icons'

import styles from './CustomCascader.module.less'

interface Option {
    value: string;
    label: string;
    children?: Option[];
}

const options: Option[] = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
            {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                ],
            },
        ],
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
            {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                ],
            },
        ],
    },
];

export default function CustomCascader() {

    const [selectedValue, setSelectedValue] = useState<any[]>(['zhejiang'])

    const [open, setOpen] = useState(false)

    const onChange: CascaderProps<Option>['onChange'] = (value, selectOptions) => {
        // console.log(value, selectOptions);
        setSelectedValue(value)
        setOpen(false)
    };


    React.useEffect(() => {
        const container = document.getElementById('custom_cascader_container');
        if (!container) return;

        const handleMouseLeave = (e: MouseEvent) => {
            // 鼠标离开容器时关闭弹窗
            setOpen(false);
        };

        container.addEventListener('mouseleave', handleMouseLeave);

        return () => {
            container.removeEventListener('mouseleave', handleMouseLeave);
        };
    }, []);


    // 只展示最后一项
    const displayRender = (labels: string[]) => labels[labels.length - 1];
    return (
        <>
            <div id='custom_cascader_container' className={styles.custom_cascader_container} style={{ position: 'relative' }}>
                <Cascader
                    className={styles.custom_cascader}
                    variant='borderless'
                    changeOnSelect
                    suffixIcon={<RightOutlined style={{ color: '#FFFFFF' }} />}
                    options={options}
                    onChange={onChange}
                    expandTrigger="hover"
                    displayRender={displayRender}
                    value={selectedValue}
                    getPopupContainer={() => {
                        return document.getElementById('custom_cascader_container') as HTMLElement
                    }}
                    open={open}
                    onMouseEnter={() => setOpen(true)}
                    onOpenChange={(value) => {
                        console.log("🚀 ~ CustomCascader ~ value:", value)
                    }}
                />
            </div>
        </>
    )
}
